<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
    <td style="padding: 0 10px;">
      <input v-model="params.keywords" placeholder="请输入文章关键字" @keyup.enter="init"
             class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
             type="text"> </input>
    </td>
    <td>
      <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
      <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
              class="l-btn-text">重载</span></span></a>
    </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="richTextBox"></table>
</div>
<script>
  var activityRichTextVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        keywords: '',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        this.init();
      },
      init: function () {
        activityRichTextReload();
      },
    }
  });

  var activityRichTextReload = function () {
    if(activityRichTextVm.initLoad){
      activityRichTextVm.initLoad = false;
    }else{
      $("#richTextBox").datagrid('load', activityRichTextVm.params);
    }
  };

  var selectRichText = function (id, title) {
    if(id){
      if('undefined' !== typeof activityAddVM){
        activityAddVM.form.richtext_id = id;
        activityAddVM.form.richtext_title = title;
      }
      $("#activityadddlg").dialog('close');
    } else {
      $.messager.alert('提示', '请先选择要操作的行！', 'warning');
    }
  };

  var activityRichTextSearch = function () {
    $("#richTextBox").datagrid({
      title: '',
      width: 798,
      height: 538,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'id',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/activity/getrichtext',
      queryParams: activityRichTextVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'title',title:'富文本标题', width: fixWidth(30), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'无标题';
          }},
        {field:'created_at',title:'添加时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'--';
          }},
        {field: 'options', title: '操作', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
            let buttons = '<div class="table">';
              buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" onclick="selectRichText(\'' + rowData.id + '\',\'' + rowData.title + '\')"><span class="l-btn-text">选择</span></span>';
            return buttons + '</div>';
          }},
      ]],
    });
    activityRichTextVm.initLoad = true;
  };
  onDatagridResize("#richTextBox");
  activityRichTextSearch();
</script>
<style>
  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>